import { PageContainer, ProTable } from '@ant-design/pro-components';
import { useDispatch, useModel, useSelector } from '@umijs/max';
import { Button, Modal, Popconfirm, Switch, Tag, message } from 'antd';
import { useEffect, useState } from 'react';
import AdminForm from './components/adminForm';

// import {getAdminList} from "@/services/admin"
export default function AdminList() {
  const dispatch = useDispatch();
  const { adminList } = useSelector((state) => state.admin);
  const [isModalShow, setModalShow] = useState(false);
  const [editTarget, setEditTarget] = useState({});
  const { initialState } = useModel('@@initialState');
  console.log(initialState);
  useEffect(() => {
    // 初始请求数据
    if (adminList.length > 0) {
      //
      return;
    } else {
      dispatch({ type: 'admin/_initList' });
    }
  }, []);

  // console.log(demo);
  function handleCancel() {
    setModalShow(false);
    setEditTarget({});
  }
  function handleStatusChange(row, tar) {
    // console.log(tar, '这里');
    // console.log(row, '行信息');
    const id = row._id;
    dispatch({
      type: 'admin/_editListInfo',
      payload: {
        id,
        data: {
          enabled: tar,
        },
      },
    });
    // tar是目前更改后的状态
  }
  function handleEditAdmin(info) {
    console.log(info, '回填数据');
    setModalShow(true);

    setEditTarget(info);
  }
  function submit(tar) {
    console.log(tar, '要提交的对象');
    // 拿到要提交的对象
    const id = tar._id;
    dispatch({
      type: 'admin/_editListInfo',
      payload: {
        id,
        data: {
          ...tar,
        },
      },
    });
    // 隐藏表单
    setModalShow(false);
    setEditTarget({});
  }
  function confirm(tar) {
    dispatch({
      type: 'admin/_delAdmin',
      payload: tar._id,
    });
    message.success('删除成功');
  }
  const columns = [
    {
      title: '登陆账号',
      dataIndex: 'loginId',
      key: 'loginId',
    },
    {
      title: '登陆密码',
      dataIndex: 'loginPwd',
      key: 'loginPwd',
      search: false,
    },
    {
      title: '昵称',
      dataIndex: 'nickname',
      key: 'nickname',
    },
    {
      title: '头像',
      dataIndex: 'avatar',
      key: 'avatar',
      valueType: 'avatar',
      search: false,
      // render: (_,rows) => {
      //     return (
      //         <Image src={rows.avatar} id={rows._id} />
      //     )
      // }
    },
    {
      title: '权限',
      dataIndex: 'permission',
      key: 'permission',
      render: (_, rows) => {
        const res =
          rows.permission === 1 ? (
            <Tag color="magenta">超级管理员</Tag>
          ) : (
            <Tag color="cyan">普通管理员</Tag>
          );
        return res;
      },
    },
    {
      title: '账号状态',
      dataIndex: 'enabled',
      key: 'enabled',
      align: 'center',
      render: (_, rows) => {
        const defaultChecked = rows.enabled;
        // 判断要修改状态的账号是否是当前账号
        const isSelf = initialState.userInfo._id === rows._id;
        return (
          <>
            {isSelf ? (
              <Tag color="red">-</Tag>
            ) : (
              <Switch
                defaultChecked={defaultChecked}
                size="small"
                onChange={(tar) => {
                  handleStatusChange(rows, tar);
                }}
              />
            )}
          </>
        );
      },
    },
    {
      title: '操作',
      key: 'options',
      render: (_, rows) => {
        return (
          <>
            <Button
              type="link"
              size="small"
              onClick={() => {
                handleEditAdmin(rows);
              }}
            >
              编辑
            </Button>
            <Popconfirm
              title="删除管理员"
              description="确定删除当前管理员"
              onConfirm={() => {
                confirm(rows);
              }}
              okText="确定"
              cancelText="取消"
            >
              <Button type="link" size="small">
                删除
              </Button>
            </Popconfirm>
          </>
        );
      },
      search: false,
    },
  ];
  return (
    <>
      <PageContainer
        header={{
          breadcrumb: {
            items: [
              {
                title: '管理员',
              },
              {
                title: '管理员列表',
              },
            ],
          },
        }}
      >
        <ProTable
          pagination={{
            total: adminList.length,
            defaultPageSize: 5,
          }}
          columns={columns}
          dataSource={adminList}
          rowKey={(row) => row._id}
        ></ProTable>
        <Modal
          title="修改管理员信息"
          open={isModalShow}
          footer={null}
          onCancel={handleCancel}
        >
          <AdminForm type="edit" initData={editTarget} submit={submit} />
        </Modal>
      </PageContainer>
    </>
  );
}
